<!--
 @description 附件
 @fileName AttachList.vue
 @author zengqiongying
 @created 2021/10/29 14:13:28
-->
<template>
  <div>
    <div class="article-container">
      <div class="article-title">
        <p>{{ detailData.title }}</p>
        <p class="time">
          <span>{{ detailData.lastUpdateTime | filterTime }}</span>
          <span>{{ detailData.moduleName }}</span>
          <span>{{ detailData.categoryName }}</span>
        </p>
      </div>

      <div v-if="detailData.contentType===2" class="video-content">
        <video v-if="videoUrl" :src="videoUrl | filterImageUrl" class="file-cover-box" controls="controls">
          您的浏览器不支持 video 标签。
        </video>
      </div>
      <div v-else class="article-content" v-html="detailData.content" />
      <div v-if="detailData.attachments && detailData.attachments.length>0" class="attach-box">
        <div>附件：</div>
        <div class="attach-list">
          <div v-for="(item,index) in detailData.attachments" :key="index" class="list">
            <div class="att-name">{{ item.fileName || item.fileUrl }}</div>
            <!-- <div class="btn-down" @click="handleDown(item)">下载</div> -->
            <!-- <a v-if="abelWaterTypes.includes(item.type.toLowerCase())" :href="`${waterMarkDownUrl}${item.id}`" target="_banck" class="btn-down">下载</a> -->
            <a :href="item.fileUrl | filterImageUrl" target="_banck" class="btn-down">下载</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { saveAs } from 'file-saver'
import { downFileByWaterMark } from '@/api/content'
import xss from 'xss'
export default {
  name: 'NoticeContent',
  filters: {
    filterTime: parseTime
  },
  props: {
    detailData: {
      type: [String, Object],
      default: ''
    },
    isCommon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      waterMarkDownUrl: `${process.env.VUE_APP_BASE_API}/api/v1/contentInfo/downloadAttachmentAndAddWatermark/`,
      abelWaterTypes: ['pdf', 'jpg', 'jpeg', 'png']// ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'] // 可添加水印的类型
    }
  },
  computed: {
    videoUrl() {
      let url = ''
      if (this.detailData.videos && this.detailData.videos.length > 0) {
        url = this.detailData.videos[0].fileUrl
      }
      return url
    },
    content() {
      return xss(this.detailData.content || '')
    }
  },
  created() {

  },
  methods: {
    handleDownByWater(file) {
      const issafariBrowser = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
      const url = this.formatImageUrl(file.fileUrl)
      const filename = file.fileName || new Date().getTime()
      // 是否使用Safari浏览器下载
      if (issafariBrowser) {
        var link = document.createElement('a')
        link.target = '_blank'
        link.href = url
        if (link.download !== undefined) {
          link.download = filename
        }
        if (document.createEvent) {
          var e = document.createEvent('MouseEvents')
          e.initEvent('click', true, true)
          link.dispatchEvent(e)
          return true
        }
      } else {
        const blob = new Blob([url])
        saveAs(blob, filename)
        // saveAs(url, filename)
      }
    },
    handleDown(file) {
      const issafariBrowser = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
      const url = this.formatImageUrl(file.fileUrl)
      const filename = file.fileName || new Date().getTime()
      // 是否使用Safari浏览器下载
      if (issafariBrowser) {
        var link = document.createElement('a')
        link.target = '_blank'
        link.href = url
        if (link.download !== undefined) {
          link.download = filename
        }
        if (document.createEvent) {
          var e = document.createEvent('MouseEvents')
          e.initEvent('click', true, true)
          link.dispatchEvent(e)
          return true
        }
      } else {
        const blob = new Blob([url])
        saveAs(blob, filename)
        // saveAs(url, filename)
      }
    }
  }
}

</script>
<style lang='scss' scoped>
.bottom-opter{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(115,115,115,.3);
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .txt{
    font-size: 16px;
    margin-right: 50px;
  }
  .btn-zan{
    margin-left: 20px;
    text-align: center;
    cursor: pointer;
    .svg-icon{
      font-size:30px;
      margin-bottom:5px;
    }
    .icon-cai{
      transform: rotateX(180deg);   /* 垂直镜像翻转 */
    }
    &.activve{
      color:#3DC094;
    }
  }
}
.bottom-opter~.article-container{
  padding-bottom:60px
}
.article-title{
  position: relative;
  border-bottom:1px solid #dadada;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  padding:  0 80px;
  .btn-back{
    position: absolute;
    right:10px;
    top:0;
    z-index:1;
  }
  .time{
    margin-top: 10px;
    font-size: 14px;
    color: #999;
    span{
      position:relative;
      padding: 0 10px;
      &:after{
        content:'';
        position: absolute;
        left:0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 12px;
        background:#ececec ;
      }
      &:first-child::after{
        width: 0;
      }
    }
  }
}
.article-content{
  margin: 10px auto 30px;
  padding: 0 10px;
  line-height: 1.4;
  font-size: 14px;
  max-width: 1000px;
  box-sizing: border-box;
  overflow-y: auto;
  @include scrollBar;
  /deep/ img{
    max-width:100% !important;
    height: auto !important;
  }
}
.video-content{
  margin: 10px auto 0;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  video{
    max-width: 100%;
    height: 500px;
    object-fit: contain;
  }
}

.attach-box{
  margin-top:20px;
  display: flex;
  margin-bottom: 10px;
  line-height: 22px;
  .attach-list{
    flex: 1;
    margin-left: 10px;
    .list{
      display: flex;
      align-items: center;
      margin-bottom:10px;
      color: #3DC094;
      a{
        color: #3DC094;
      }
      .att-name{
        // min-width: 200px;
        color:#333;
      }
      .btn-down{
        margin-left: 40px;
        color: #3DC094;
        border:#3DC094 1px solid;
        width:66px;
        line-height:22px;
        border-radius:2px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}
</style>
